<template>
  <div class="tableColumnList">
         <el-table ref="dragTable" :data="tableData" row-key="columnId" :max-height="tableHeight">
                <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
                <el-table-column
                    label="字段列名"
                    prop="columnName"
                    min-width="10%"
                    :show-overflow-tooltip="true"
                />
                <el-table-column label="字段描述" min-width="10%">
                    <template slot-scope="scope">
                    <el-input v-model="scope.row.columnComment"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="物理类型"
                    prop="columnType"
                    min-width="10%"
                    :show-overflow-tooltip="true"
                />
                <el-table-column label="Java类型" min-width="11%">
                    <template slot-scope="scope">
                    <el-select v-model="scope.row.javaType">
                        <el-option label="Long" value="Long" />
                        <el-option label="String" value="String" />
                        <el-option label="Integer" value="Integer" />
                        <el-option label="Double" value="Double" />
                        <el-option label="BigDecimal" value="BigDecimal" />
                        <el-option label="Date" value="Date" />
                        <el-option label="Boolean" value="Boolean" />
                    </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="java属性" min-width="10%">
                    <template slot-scope="scope">
                    <el-input v-model="scope.row.javaField"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="插入" min-width="5%">
                    <template slot-scope="scope">
                    <el-checkbox true-label="1" v-model="scope.row.isInsert"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="编辑" min-width="5%">
                    <template slot-scope="scope">
                    <el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="列表" min-width="5%">
                    <template slot-scope="scope">
                    <el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="查询" min-width="5%">
                    <template slot-scope="scope">
                    <el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="查询方式" min-width="10%">
                    <template slot-scope="scope">
                    <el-select v-model="scope.row.queryType">
                        <el-option label="=" value="EQ" />
                        <el-option label="!=" value="NE" />
                        <el-option label=">" value="GT" />
                        <el-option label=">=" value="GTE" />
                        <el-option label="<" value="LT" />
                        <el-option label="<=" value="LTE" />
                        <el-option label="LIKE" value="LIKE" />
                        <el-option label="BETWEEN" value="BETWEEN" />
                    </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="必填" min-width="5%">
                    <template slot-scope="scope">
                    <el-checkbox true-label="1" v-model="scope.row.isRequired"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="显示类型" min-width="12%">
                    <template slot-scope="scope">
                    <el-select v-model="scope.row.htmlType">
                        <el-option label="文本框" value="input" />
                        <el-option label="文本域" value="textarea" />
                        <el-option label="下拉框" value="select" />
                        <el-option label="单选框" value="radio" />
                        <el-option label="复选框" value="checkbox" />
                        <el-option label="日期控件" value="datetime" />
                        <el-option label="图片上传" value="imageUpload" />
                        <el-option label="文件上传" value="fileUpload" />
                        <el-option label="富文本控件" value="editor" />
                    </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="字典类型" min-width="12%">
                    <template slot-scope="scope">
                    <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                        <el-option
                        v-for="dict in dictOptions"
                        :key="dict.dictType"
                        :label="dict.dictName"
                        :value="dict.dictType">
                        <span style="float: left">{{ dict.dictName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                    </el-option>
                    </el-select>
                    </template>
                </el-table-column>
        </el-table>
  </div>
</template>
<script lang="ts">
 
import { Component, Vue,Prop } from 'vue-property-decorator';
import FormCreateApi from "@/components/list-create/table-code-create-api";
@Component
export default class ToDoList extends Vue {
        @Prop() params!: any;
        private loading:boolean=false;
        private tableData:Array<any>=new Array<any>();
        private searchTypeOptions:any=[];
        private displayTypes:any=[];
        private dictOptions:any=[];
        public async created(){
            this.tableData=this.params.tableData;
            this.dictOptions=this.params.dictOptions;
            this.searchTypeOptions=[
                    {value:'EQ',label:'='},
                    {value:'NE',label:'!='},
                    {value:'GT',label:'>'},
                    {value:'GTE',label:'>='},
                    {value:'LT',label:'<'},
                    {value:'LTE',label:'<='},
                    {value:'LIKE',label:'like'},
                    {value:'BETWEEN',label:'Between'}
            ]
            this.displayTypes=[
                {value:'input',label:'文本框'},
                {value:'textarea',label:'文本域'},
                {value:'select',label:'下拉框'},
                {value:'radio',label:'单选框'},
                {value:'checkbox',label:'复选框'},
                {value:'datetime',label:'日期控件'}
            ]
        }
        //创建表单
        public async saveTableInfo() {
              let params:any={};
              this.tableData.forEach(item=>{
                   item.insert?item.isInsert='1':item.isInsert=null;
                   item.edit?item.isEdit='1':item.isEdit=null;
                   item.list?item.isList='1':item.isList=null;
              })
              let data:any=await FormCreateApi.saveTableColumns(params);
              console.log(data);

        }
        //取消
        public cancel(){
            console.log("XXXXXXx");
        }

}
</script>
<style lang="less">
    .tableColumnList{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs__header{
             margin: 0 0 0px;
        }
        .buttons{
            display: flex;
            justify-content: center;
            height:60px;
            align-items:center;
        }
    }
</style>
